<template>
    <div class="ctbsc-detail">
        <van-sticky >
            <NavBar pathName="detail" :title="info.title"></NavBar>
        </van-sticky>
        <van-cell url="">
            <template #default>
                <div class="title-box">

                    <div class="item-con">
                        <div class="item-title">{{info.title}}</div>

                        <div class="item-nums">
                            <span><van-icon name="underway-o"/>  {{info.created_at}}</span>
                            <span><van-icon name="eye-o"/> {{info.see_num}}</span>
                            <span><van-icon name="down"/> {{info.download_num}}</span>
                            <sapn><van-icon name="like-o" /> 点击收藏 </sapn>
<!--                            <sapn><van-icon name="like" color="#1989fa"/> 已收藏 </sapn>-->
                        </div>
                    </div>
                </div>
            </template>
        </van-cell>

        <div class="detail-con" v-if="loading" @contextmenu.prevent @keydown="handlePaste($event)">
            <div class="con-box" v-if="info.content" v-html="info.content">

            </div>
            <div class="con-box" v-if="info.img_urls">
                <img :src="$config.apiUrl+'/'+info.img_urls" alt="">
            </div>

            <div v-if="!info.is_show_download">
                <div style="margin: 5px 0px 30px; border-bottom: 2px dotted rgb(136, 136, 136); height: 15px; text-align: center; font-size: 20px;"> ✂ </div>
                <div style="text-align: center">
                    <van-button  @click="wechatPay" style="flex-shrink:0;border-radius: 0px;" v-if="!info.is_show_download" color="linear-gradient(to right, #ff6034, #ee0a24)"
                                 type="primary">单独购买本文档（￥{{info.price}}）
                    </van-button>
                </div>
                <div class="tips" style="margin-top:30px;">
                  试读已经结束，开通会员可查阅全文，下载本站所有内容（Word文档可复制、可修改），网站资料每日更新中..会员分多种类型，可根据自己实际需要选择！如遇无法支付，请联系客服微信：ctbsc2021
                </div>
            </div>

        </div>

        <van-tabbar :safe-area-inset-bottom="true">
            <van-button to="/vip" type="primary" style="border-radius: 0px;width: 100%;" v-if="!$store.getters.userInfo||!$store.getters.userInfo['is_member']||$store.getters.userInfo['is_member']==2">开通会员</van-button>
            <template v-if="info.type=='ppt'||info.type=='pptx'">
                <van-button type="info" style="border-radius: 0px;width: 100%;"  @click="downLoad">下载PPT</van-button>
                <van-button type="warning" style="border-radius: 0px;flex-shrink: 0"  @click="downLoadText">下载PPT演讲稿</van-button>
            </template>
            <template v-else>
                <van-button type="info" style="border-radius: 0px;width: 100%;"  @click="downLoadText">马上下载</van-button>
            </template>



        </van-tabbar>
        <van-loading color="#1AA97B" style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="!loading"/>

    </div>
</template>

<script>
    import wx from "weixin-js-sdk"
    import NavBar from "@/components/NavBar.vue";
    export default {
        name: "DetailView",
        components: {
            NavBar
        },
        data() {
            return {
                showLogin: false,
                showPay: false,
                loading: false,
                info: {},
                last: [],
                next: {},
                before: {},
                icon:this.$config.host+'/static/images/customer.png'

            };
        },
        created() {
            this.getInfo();
        },
        mounted:function(){
            this.$nextTick(()=>{
                window.scrollTo(0,0)

            });
        },
        methods: {
            tabBarChange() {

            },
            wechatPay() {

                this.$apis.buyArticle({id:this.info.id,type:'article'}).then(res=>{
                    if(res.records&&Object.keys(res.records).length>0){
                        let payData=res.records;
                        this.$utils.wechatPay(this,payData, ()=> {
                            this.getInfo()
                        })
                    }else{
                        this.$toast({
                            message: '获取支付信息失败，请重试',
                        });
                    }
                })
            },
            downLoadText(){
                if (!this.info.is_show_download) {
                    this.$toast({
                        message: '请先开通会员或单独购买本文档',
                    });
                    return;
                }
                let link = document.createElement("a");
                //创建一个a标签
                link.style.display = "none";
                link.href = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=word&token=${this.$store.getters.token}`;
                //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
                link.setAttribute("download", name);
                // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                document.body.appendChild(link);
                //将上面创建的a标签加入到body的尾部
                link.click();
            },
            downLoad() {
                if (!this.info.is_show_download) {
                    this.$toast({
                        message: '请先开通会员或单独购买本文档',
                    });
                    return;
                }
                let link = document.createElement("a");
                //创建一个a标签
                link.style.display = "none";
                link.href = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=${this.info.type}&token=${this.$store.getters.token}`;
                //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
                link.setAttribute("download", name);
                // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                document.body.appendChild(link);
                //将上面创建的a标签加入到body的尾部
                link.click();
            },
            handlePaste(event) {
                event.preventDefault();
                return false
            },
            getInfo() {
                let params = this.$route.params
                this.loading = false;
                this.$apis.getDetail(params).then(res => {
                    this.info = res.records
                    this.before = res.before;
                    this.next = res.next;
                    this.last = res.last;
                    this.loading = true;

                    this.$store.dispatch('user/updateNavBarInfo', {title:this.info.title})
                    this.wxShareInit();


                    this.$utils.setPageTitle(this.info.title)
                })
            },
            wxShareInit(){
                let curUrl=this.$utils.removeQueryParam(window.location.href,'pid');
                curUrl=this.$utils.removeQueryParam(curUrl,'code')
                curUrl=this.$utils.removeQueryParam(curUrl,'state')

                if(this.$store.getters.userInfo){
                    curUrl=curUrl;
                    // curUrl=curUrl+"?pid="+this.$store.getters.userInfo.union_id;
                }
                let shareUrl=curUrl;
                //
                // this.$toast(shareUrl)
                // console.log(shareUrl)
                let params={
                    url:shareUrl
                }
                this.$apis.wxConfig(params).then(res => {
                    let wxConfig=JSON.parse(res.records.wxConfig);
                    let info=this.info;
                    let icon=this.$config.host+'/static/images/logo.jpg';
                    let shareUrl=wxConfig.url;
                    console.log(shareUrl)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
                        appId: wxConfig.appId, // 必填，公众号的唯一标识
                        timestamp:wxConfig.timestamp, // 必填，生成签名的时间戳
                        nonceStr: wxConfig.nonceStr, // 必填，生成签名的随机串
                        signature: wxConfig.signature,// 必填，签名
                        jsApiList:wxConfig.jsApiList // 必填，需要使用的 JS 接口列表
                    });

                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        wx.updateAppMessageShareData({
                            title:info.title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新", // 分享描述
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })
                        wx.onMenuShareAppMessage({
                            title:info.title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新", // 分享描述
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })
                        wx.updateTimelineShareData({
                            title:info.title, // 分享标题
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })

                      wx.onMenuShareTimeline({
                        title:info.title, // 分享标题
                            link: shareUrl,
                        imgUrl: icon, // 分享图标
                            success: function () {
                              // 用户点击了分享后执行的回调函数
                            }
                          })
                        wx.onMenuShareWeibo({
                            title: info.title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新",
                            link: shareUrl, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        wx.onMenuShareQQ({
                            title: info.title, // 分享标题
                            desc: "扣时事，跟热点，日更新",
                            //desc: info.title, // 分享描述
                            link: shareUrl, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });

                    });
                })
            }


        }
    };
</script>
<style lang="less">
    .ctbsc-detail {
        .van-tabbar {
            height: 44px;
        }

        .title-box {
            .item-con {
                overflow: hidden;

                .item-title {
                    font-weight: bold;
                    line-height: 20px;
                }

                .item-nums {
                    color: #666;
                    font-size: 10px;

                    span {
                        margin-right: 20px;
                    }

                }
            }
        }
        .detail-con{
            .con-box{
                padding:0px 10px;
                text-align:Justify;
                line-height: 15px;
                p{
                    padding:0px 0px;
                    margin:0px 0px;
                    span{
                        font-size:12px !important;
                        line-height: 15px;
                    }
                }
                img{
                    width: 100%;
                }
            }
        }
        .tips{
            text-align: center;
            color: #F44336;
            font-weight: bold;
            font-size:14px;
            padding:0px 10px;

        }
    }
</style>
